<template>
  <div class="forgetpswemail-wrap">
    <div class="loginbyphone-content-wrap">
      <div class="title" v-if="!showLink">{{ $t('找回密码') }}</div>
      <el-form
        :model="formData"
        ref="formData"
        label-width="0"
        class="demo-ruleForm"
        @submit.native.prevent
      >
        <p class="email" v-if="!showLink">{{ $t('邮箱') }}</p>
        <el-form-item
          v-if="!showLink"
          prop="phone"
          :rules="[{ required: true, message: $t('邮箱不能为空') }]"
        >
          <el-input
            :placeholder="$t('请输入邮箱')"
            v-model="formData.phone"
          ></el-input>
        </el-form-item>
        <div class="show-link-box" v-if="showLink">
          <i class="el-icon-success"></i>
          <p>
            {{ $t('我们已向您的邮箱') }}{{ formData.phone
            }}{{ $t('发送了一封重置密码的邮件，点击链接即可重置登录密码') }}
          </p>
        </div>
        <el-form-item v-if="!showLink"
          ><button
            class="my-button"
            style="margin-top: 0.89rem;"
            @click="validateCode"
          >
            {{ $t('发送邮件') }}
          </button></el-form-item
        >
        <el-form-item v-else
          ><button
            class="my-button"
            style="margin-top: 0.89rem;"
            @click="goEamilLink"
          >
            {{ $t('前往邮箱') }}
          </button></el-form-item
        >
        <el-form-item style="text-align: center"
          ><button class="my-button cancel-btn" @click="handleCancel">
            {{ $t('取消') }}
          </button></el-form-item
        >
      </el-form>
    </div>
    <div class="check-email-button-wrap">
      <img
        src="../../assets/img/Vector@2x (1).png"
        @click="checkEamil"
        alt=""
      />
    </div>
  </div>
</template>
<script>
import api from '@/api/login'
var hash = {
  'qq.com': 'http://mail.qq.com',
  'gmail.com': 'http://mail.google.com',
  'sina.com': 'http://mail.sina.com.cn',
  '163.com': 'http://mail.163.com',
  '126.com': 'http://mail.126.com',
  'yeah.net': 'http://www.yeah.net/',
  'sohu.com': 'http://mail.sohu.com/',
  'tom.com': 'http://mail.tom.com/',
  'sogou.com': 'http://mail.sogou.com/',
  '139.com': 'http://mail.10086.cn/',
  'hotmail.com': 'http://www.hotmail.com',
  'live.com': 'http://login.live.com/',
  'live.cn': 'http://login.live.cn/',
  'live.com.cn': 'http://login.live.com.cn',
  '189.com': 'http://webmail16.189.cn/webmail/',
  'yahoo.com.cn': 'http://mail.cn.yahoo.com/',
  'yahoo.cn': 'http://mail.cn.yahoo.com/',
  'eyou.com': 'http://www.eyou.com/',
  '21cn.com': 'http://mail.21cn.com/',
  '188.com': 'http://www.188.com/',
  'foxmail.com': 'http://www.foxmail.com',
  'outlook.com': 'http://www.outlook.com',
}
export default {
  data() {
    return {
      formData: {
        phone: '',
        code: '',
      },
      showLink: false,
    }
  },
  methods: {
    checkEamil() {
      this.$router.replace('/forgetpswphone')
    },
    goEamilLink() {
      var _mail = this.formData.phone.split('@')[1] //获取邮箱域
      for (var j in hash) {
        if (j == _mail) {
          window.open(hash[_mail])
        }
      }
    },
    handleCancel() {
      this.$router.go(-1)
    },
    async validateCode() {
      let hasErr = false
      this.$refs['formData'].validateField(['phone', 'code'], (err) => {
        if (err) {
          hasErr = true
          return
        }
      })
      if (!hasErr) {
        let params = {
          mail: this.formData.phone,
          callbackUrl: this.$store.state.baseURL + '/resetpsw',
        }
        let url = api.sendCodeByEamil
        let res = await this.$http.get(url, { params })
        if (res && res.code == 0) {
          this.$message.success(this.$t('发送成功'))
          this.showLink = true
        } else {
          this.$message.error(res.msg || this.$t('网络错误'))
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.forgetpswemail-wrap {
  width: 32rem;
  background: #ffffff;
  border-radius: 0.35rem;
  margin: 1.8rem auto 1.8rem auto;
  padding: 1rem;
  overflow: hidden;
  box-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
}
.loginbyphone-content-wrap {
  width: 18rem;
  margin: 0 auto;
}
.title {
  font-weight: bold;
  font-size: 0.95rem;
  color: #333333;
  margin-bottom: 0.5rem;
  text-align: center;
}
.email {
  font-size: 0.75rem;
  color: #333333;
  margin-top: 0.5rem;
  margin-bottom: 0.15rem;
}
.tips {
  font-size: 0.75rem;
  color: #666666;
  line-height: 0.9rem;
  text-align: center;
  margin-top: 0.4rem;
  span {
    text-decoration: underline;
    cursor: pointer;
  }
}
.check-login-way {
  font-size: 0.75rem;
  color: #045fb2;
  line-height: 0.9rem;
  text-align: right;
  margin-top: 0.4rem;
  span {
    text-decoration: underline;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    border-radius: 0.15rem;
    &:hover {
      background-color: #f0f8ff;
    }
  }
}
.input-box {
  position: relative;
  .input-slot {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    cursor: pointer;
    color: #045fb2;
    padding: 0.15rem 0.4rem;
    border-radius: 0.15rem;
    background-color: #f0f8ff;
    &:hover {
      background-color: #e1f0ff;
    }
  }
}
.check-email-button-wrap {
  width: 0;
  height: 0;
  border-top: 3.7rem solid #c4e3ff;
  border-left: 3.7rem solid transparent;
  position: absolute;
  right: 0;
  top: 0;
  img {
    width: 1rem;
    height: 1.4rem;
    cursor: pointer;
    top: -3.4rem;
    left: -1.7rem;
    position: relative;
  }
}
.router-box {
  font-size: 0.6rem;
  color: #425f9b;
  margin-top: 0.4rem;
  text-align: center;
  span:nth-child(2) {
    text-decoration: underline;
    color: #045fb2;
    margin-left: 0.7rem;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    border-radius: 0.15rem;
    &:hover {
      background-color: #f0f8ff;
    }
  }
  .forget-box {
    text-decoration: underline;
    color: #045fb2;
    cursor: pointer;
    margin-left: 0.7rem;
    // padding: 0.1rem 0.25rem;
    border-radius: 0.15rem;
    &:hover {
      background-color: #f0f8ff;
    }
  }
}
.cancel-btn {
  background: transparent;
  color: #045fb2;
  width: fit-content;
  margin: 0.5rem auto 0 auto;
  height: 3rem;
  font-size: 0.8rem;
  border-radius: 0.15rem;
  cursor: pointer;
  display: block;
}
.show-link-box {
  text-align: center;
  i {
    font-size: 2rem;
    color: #045fb2;
  }
  p {
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.2;
    margin-top: 0.5rem;
  }
}
.my-check-box-item{
  display: flex;
  align-items: flex-start;
  margin-top: 0.4rem !important;
  font-size: 0.75rem;
  line-height: 1.2;
  .check-box {
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.25rem;
    margin-top: 0.3rem;
    border: 1px solid #ccc;
    border-radius: 0.15rem;
    position: relative;
    flex-shrink: 0;
  }
  &.active i {
    top: -0.1rem;
    left: -0.1rem;
  }
  p{
    font-size: 0.75rem !important;
  }
  span {
    color: #045fb2;
    cursor: pointer;
    padding: 0.05rem 0.15rem;
    border-radius: 0.15rem;
    &:hover {
      background-color: #f0f8ff;
    }
  }
}
</style>
<style lang="scss">
.forgetpswemail-wrap {
  .el-input {
    .el-input__inner {
      width: 100%;
      border-color: #dcdfe6;
      height: 2.56rem !important;
      font-size: 0.75rem;
      background: #fafafa;
      padding: 0 0.6rem;
      border-radius: 0.15rem;
      &:focus {
        border-color: #045fb2;
        box-shadow: 0 0 0 0.08rem rgba(4, 95, 178, 0.1);
        background: #ffffff;
      }
    }
  }
  .my-button {
    margin: 0.5rem auto 0 auto;
    width: 18rem;
    height: 3rem;
    font-size: 0.8rem;
    background: #045fb2;
    border-color: #045fb2;
    border-radius: 0.15rem;
    color: white;
    font-weight: 500;
    letter-spacing: 0.05rem;
    cursor: pointer;
    display: block;
    &:hover {
      background: #034a8c;
      border-color: #034a8c;
      box-shadow: 0 0.08rem 0.3rem rgba(4, 95, 178, 0.3);
    }
  }
  .el-form-item {
    margin-bottom: 0.3rem;
  }
  .el-form-item__error {
    font-size: 0.65rem;
    padding-top: 0.1rem;
  }
}
</style>
